<!DOCTYPE html>
<html>
	<head>
		<?php include ("common/include.php"); ?>
		<style>
			#ui_notifIt {
			    margin-top: 0px !important;
			}
		</style>
		<script type="text/javascript" src="js/index.js?v=<?php echo time();?>"></script>
		<script>
			$(document).on("pageinit","#index",function(){
				setMessage("index.message","#message");
				setMessage("index.login","#login");
				setMessage("index.register","#register");
				setMessage("index.anonymous","#anonymous");
				setMessage("greetings","#created-by");
				
				$(".input-login-index").keypress(function(event) {
				    if (event.which == 13) {
				        event.preventDefault();
				        login();
				    }
				});
				
				// http://www.jqueryrain.com/?sPi0WIEh
				notif({
					type: "success",
					msg: "<span class='help'>"+getMessage("index.help")+"</div>",
					width: 100,
					position: "right",
					fade: true,
					opacity: 0.8,
					bgcolor: "#425f9e",
					color: "#FFFFFF",
					autohide: false,
				});
				
				$("#ui_notifIt:has(span.help)").click(function(obj) {
					location.href='index.php#help';
				});
			});
			
			$(document).on("pageinit","#register",function(){
				setMessage("register.toindex","#toIndex");
				setMessage("register.toindex.after.register","#toIndexAfterReg");
				setMessage("register.message","#registerMessage");
				setMessage("register.username","#registerUsername");
				setMessage("register.password","#registerPassword");
				setMessage("register.mail","#registerMail");
				setMessage("register.retype.password","#registerRetypePassword");
				setMessage("register.confirm","#confirmRegister");
			});
			
			$(document).on("pageinit","#help",function(){
				setMessage("register.toindex",".toIndex");
				setMessage("index.help","#helpMessage");
				setMessage("index.help.explain",".helpExplain");
			});
		</script>
	</head>
	<body>
		<div data-role="page" id="index" class="index-class">
			<div data-role="content" class="ui-content-index">
				<div class="ui-body">
					<h2 align="center" style="color:#FFFFFF">[E]go</h2>
					<p id="message" style="font-size:15px; color:#FFFFFF"></p>
				</div>
				<div class="blankBox">
					<input maxlength="50" type="text" data-clear-btn="true" placeholder="masker" name="user" id="masker" value="" class="input-login input-login-index"/>
					<input maxlength="50" type="password" data-clear-btn="true" placeholder="password" name="password" id="password" value="" class="input-login input-login-index"/>
					<a id="login" href="#" class="ui-btn ui-shadow" onclick="login()"></a>
					<a id="register" href="#register" data-transition="slide" class="ui-btn ui-icon-edit ui-btn-icon-right ui-shadow"></a>
					<a id="anonymous" href="#" class="no-underline ui-btn ui-icon-eye ui-btn-icon-right ui-shadow" onclick="loginAnonymous()"></a>
				</div>
				
				<div style="margin-top:10px">
					<div id="created-by" onclick="redirectToAuthor()"></div>
					<div class="facebook_icon float_left" onclick="javascript:location.href='https://www.facebook.com/Egosocialgamenetwork'"></div>
					<a class="float_left" href="https://plus.google.com/115578486519946990366" rel="publisher"><div class="google_icon"></div></a>
				</div>
			</div>

			<div data-role="popup" id="loginError" class="ui-corner-all ui-shadow ui-btn-inline errorClass" data-position-to="window" data-overlay-theme="a">
				  <p id="errorMessage"></p>
			</div>
		</div>
			
			
		<div data-role="page" id="register" class="index-class">
			<div data-role="content" class="ui-content-index">
				<div class="ui-body">
					<p id="registerMessage" style="font-size:15px; color:#FFFFFF"></p>
				</div>
				<div class="blankBox">
					<p id="registerUsername" class="registerLabel"></p>
					<input maxlength="50" type="text" data-clear-btn="true" placeholder="masker" name="reg_user" id="reg_user" class="input-login"/>
					<p id="registerPassword" class="registerLabel"></p>
					<input maxlength="50" type="password" data-clear-btn="true" placeholder="password" name="reg_password" id="reg_password" class="input-login"/>
					<p id="registerRetypePassword" class="registerLabel"></p>
					<input maxlength="50" type="password" data-clear-btn="true" placeholder="retype password" name="reg_retypepassword" id="reg_retypepassword" class="input-login"/>
					<p id="registerMail" class="registerLabel"></p>
					<input maxlength="50" type="text" data-clear-btn="true" placeholder="mail" name="reg_mail" id="reg_mail" class="input-login"/>
					
					<a id="confirmRegister" href="#" class="ui-btn ui-shadow" onclick="register()"></a>
					<a id="toIndex" href="index.php#index" data-transition="slide"  class="ui-btn ui-shadow"></a>
				</div>
				
				<div data-role="popup" id="registerError" class="ui-corner-all ui-shadow ui-btn-inline errorClass" data-position-to="window" data-overlay-theme="a">
					  <p id="registerErrorMessage"></p>
				</div>
			
				<div data-role="popup" id="registerNotification" class="ui-corner-all ui-shadow ui-btn-inline notficationClass" data-position-to="window" data-overlay-theme="a">
					  <p id="notificationMessage"></p>
					  <a id="toIndexAfterReg" href="#index" data-transition="slide"  class="ui-btn ui-shadow"></a>
				</div>
			</div>
		</div>
		
		
		<div data-role="page" id="help" class="index-class">
			<div data-role="content" class="ui-content-index">
				<div class="ui-body">
					<h2 id="helpMessage"></h2>
				</div>
				<div class="blankBox">
					<div class="helpExplain" style="color:grey"></div>
					
					<a href="index.php#index" data-transition="slide"  class="toIndex ui-btn ui-shadow"></a>
				</div>
				
			</div>
		</div>
	</body>
</html>
